<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            h2 {
                text-align: center;
            }
            table {
                height: 80px;
                margin: 0 auto;
                border-collapse: collapse;
                text-align: center;
            }
            th {
                padding: 5px 30px;
            }
            table,
            th,
            td {
                border: 1px solid #000;
            }
        </style>
    </head>
    <body>
        <h2>订单确认</h2>
        <script>
            let price = +prompt("请输入商品价格：");
            let num = +prompt("请输入商品数量：");
            let address = prompt("请输入收货地址：");
            let total = price * num;
            document.write(`
            <table>
                <tr>
                    <th>商品名称</th>
                    <th>商品价格</th>
                    <th>商品数量</th>
                    <th>总价</th>
                    <th>收货地址</th>
                </tr>
                <tr>
                    <td>小米青春版PLUS</td>
                    <td>${price}</td>
                    <td>${num}</td>
                    <td>${total}</td>
                    <td>${address}</td>
                </tr>
            </table>
            `);
        </script>
    </body>
</html>
